<template>
  <div>
    <common-head :title="$route.name" />
    <div class="contander">
      <div
        @click="sortBy(0)"
        :class="[
          'tabab',
          'stort',
          {
            active: sort.by === 0,
          },
        ]"
      >
        销量
      </div>
      <div
        @click="sortByPrice"
        :class="[
          'tabab',
          'stortPic',
          {
            active: sort.by === 1,
          },
        ]"
      >
        价格
        <div
          :class="[
            'dow',
            'up',
            {
              active: sort.by === 1 && sort.upDown === 0,
            },
          ]"
        ></div>
        <div
          :class="[
            'dow',
            'botm',
            {
              active: sort.by === 1 && sort.upDown === 1,
            },
          ]"
        ></div>
      </div>
      <div
        @click="sortBy(2)"
        :class="[
          'tabab',
          'stortNews',
          {
            active: sort.by === 2,
          },
        ]"
      >
        新品
      </div>
    </div>
    <div
      class="list-top"
      @click="clickItem(item.id)"
      v-for="item in items"
      :key="item.id"
    >
      <img :src="item.pic" alt="" />
      <div class="list-div1">
        <h2>{{ item.name }}</h2>
        <p class="list-p">
          <!-- 三目嵌套三目判断描述内容超过10的时候显示点点点 -->
          {{
            item.characteristic
              ? item.characteristic.length < 10
                ? item.characteristic.length
                : item.characteristic.substr(0, 10) + "...."
              : "暂无商品描述"
          }}
        </p>
        <div class="div">
          <p class="p">￥{{ item.minPrice }}</p>
          <van-icon
            name="gouwuche"
            class-prefix="icon"
            size="24"
            color="pink"
          ></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from "../../components/CommonHead.vue";
import { fetchListItems } from "_api";
export default {
  name: "ItemList",
  components: {
    CommonHead,
  },
  data() {
    return {
      sort: {
        //by 等于0的时候是销量，等于1的时候是价格，等于2的时候是新品
        by: 0,
        //upDown 等于0的时候是上箭头，等于1的时候是下箭头
        upDown: 0,
      },
      items: [],
    };
  },
  created() {
    this.fetchListItems();
  },
  methods: {
    // 点击
    clickItem(id) {
      // 点击跳转到详情页
      this.$router.push(`/detail/${id}`);
    },
    fetchListItems() {
      fetchListItems({
        categoryId: this.$route.query.cateId,
        orderBy: this.orderBy,
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result;
        }
      });
    },
    sortBy(n) {
      this.sort.by = n;
      this.fetchListItems();
    },
    sortByPrice() {
      // 点击按照价格排序
      /* 
      1、按照销量和新品排序，点击按照价格排序 默认 按照价格的升序排序
      2、按照价格排序，只是切换了升序还是降序
      */
      if (this.sort.by !== 1) {
        // 从销量和新品点击按照价格排序
        this.sort.by = 1;
        this.sort.upDown = 0;
      } else {
        // 按照价格排序 切换升序降序
        if (this.sort.upDown === 0) {
          this.sort.upDown = 1;
        } else {
          this.sort.upDown = 0;
        }
      }
      this.fetchListItems();
    },
  },
  computed: {
    orderBy() {
      let orderBy = "ordersDown";
      switch (this.sort.by) {
        case 0:
          // 按照销量的降序来排序
          orderBy = "ordersDown";
          break;
        case 1:
          // 按照价格 判断升序还是降序
          if (this.sort.upDown === 0) {
            orderBy = "priceUp";
          } else {
            orderBy = "priceDown";
          }
          break;
        case 2:
          // 按照新品来排序
          orderBy = "addedDown";
        default:
          break;
      }
      return orderBy;
    },
  },
};
</script>

<style lang="scss" scoped>
.contander {
  margin-top: 46px;
  display: flex;
  justify-content: space-around;
  background: rgb(240, 240, 93);
  .active {
    color: rgba(177, 20, 41, 0.8);
  }
  .dow {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    position: relative;
    &.up {
      position: absolute;
      top: 44px;
      left: 5.5rem;
      border-bottom-color: #333;
      &.active {
        border-bottom-color: rgba(177, 20, 41, 0.8);
      }
    }
    &.botm {
      position: absolute;
      top: 62px;
      left: 5.5rem;
      border-top-color: #333;
      &.active {
        border-top-color: rgba(177, 20, 41, 0.8);
      }
    }
  }
  .tabab {
    font-size: 18px;
  }
}
.list-top {
  background: rgb(187, 22, 49);
  width: 9rem;
  display: flex;
  justify-content: flex-start;
  padding-bottom: 50px;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
  img {
    width: 140px;
    height: 140px;
    margin-top: 10px;
    margin-left: 5px;
  }
  h2 {
    margin-top: 0;
    font-size: 18px;
    margin-top: 20px;
  }
  .list-p {
    font-size: 16px;
    color: rgb(57, 145, 145);
    font-weight: 400;
    text-align: center;
  }
  .div {
    width: 140px;
    display: flex;
    justify-content: space-between;
    .icon {
      margin-top: 16px;
    }
  }
  .list-div1 {
    margin-left: 10px;
  }
  .p {
    font-size: 16px;
    font-weight: 800;
    margin-left: 20px;
  }
}
</style>